<template>
    <div class="activity-right" id="report">
        <h3 style=" margin-top:20px;">运营报表</h3>
        <div class="top">
            <div class="purchase">
                <h4>代购用户(含以上级别)</h4>
                <el-form  ref="form" :model="sizeForm" label-width="80px"  size="mini">
                    <el-form-item label="累计:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="今日活跃:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="今日新增:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="昨日活跃:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="昨日新增:">
                        {{sizeForm.name}}
                    </el-form-item>
                </el-form>
            </div>
            <div class="member">
                <h4>会员用户</h4>
                <el-form  ref="form" :model="sizeForm" label-width="80px"   size="mini">
                    <el-form-item label="累计:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="今日活跃:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="今日新增:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="昨日活跃:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="昨日新增:">
                        {{sizeForm.name}}
                    </el-form-item>
                </el-form>
            </div>
            <div class="user">
                <h4>普通用户</h4>
                <el-form  ref="form" :model="sizeForm" label-width="80px"   size="mini">
                    <el-form-item label="累计:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="今日活跃:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="今日新增:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="昨日活跃:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="昨日新增:">
                        {{sizeForm.name}}
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <h4>订单情况</h4>
        <div class="middle">
            <div class="middle-1">
                <h4>本月累计</h4>
                <el-form  ref="form" :model="sizeForm" label-width="80px"   size="mini">
                    <el-form-item label="支付订单:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="商品数量:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="销售金额:">
                        {{sizeForm.name}}
                    </el-form-item>
                </el-form>   
            </div>
            <div class="middle-1">
                <h4>今日累计</h4>
                <el-form  ref="form" :model="sizeForm" label-width="80px"   size="mini">
                    <el-form-item label="支付订单:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="商品数量:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="销售金额:">
                        {{sizeForm.name}}
                    </el-form-item>
                </el-form>   
            </div>
            <div class="middle-1">
                <h4>上月累计</h4>
                <el-form  ref="form" :model="sizeForm" label-width="80px"   size="mini">
                    <el-form-item label="支付订单:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="商品数量:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="销售金额:">
                        {{sizeForm.name}}
                    </el-form-item>
                </el-form>   
            </div>
            <div class="middle-1">
                <h4>昨日累计</h4>
                <el-form  ref="form" :model="sizeForm" label-width="80px"   size="mini">
                    <el-form-item label="支付订单:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="商品数量:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="销售金额:">
                        {{sizeForm.name}}
                    </el-form-item>
                </el-form>   
            </div>
        </div>
        <h4>活动情况</h4>
        <div id="activity-1">
            <el-form class="form-1"  ref="form" :model="sizeForm" label-width="150px"   size="mini">
                    <el-form-item label="热销会场:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="在售商品数量:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="预告会场:">
                        {{sizeForm.name}}
                    </el-form-item>
                    <el-form-item label="预售商品数量:">
                        {{sizeForm.name}}
                    </el-form-item>
                </el-form>   
        </div>
    </div>
</template>
<script>
import {} from '../../data/postData';
    export default {
        mounted() {
           
        },
        data() {
            return {
                user: JSON.parse(sessionStorage.getItem("ddaigoUser")),
                sizeForm:{
                    name:'123'
                },
            }
        },
        methods: {

        },
    
    }
</script>
<style scoped lang='less'>
    .top{
        margin: 20px 0;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        border:1px solid #eee;
        div{
            h4{
                color:red;
            }
            form{
                box-sizing: border-box;
                padding:20px;
                margin-top:15px;
                text-align: center;
                border: 1px solid #eee;
                border-radius: 10px;
                background:#f3f3f3;
            }
        }
 
        .purchase ,.member ,.user{
            width: 30%;
            margin:20px;
           
        }
    }
    .middle{
        margin: 20px 0;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        border:1px solid #eee;
         div{
            h4{
                color:red;
            }
            form{
                box-sizing: border-box;
                padding:20px;
                margin-top:15px;
                text-align: center;
                border: 1px solid #eee;
                border-radius: 10px;
                background:#f3f3f3;
            }
        }
        .middle-1{
            width: 50%;
            padding:20px;
           
        }
    }
    #activity-1{
         margin: 20px 0;
         border:1px solid #eee;
         .form-1{
             margin: 20px;
         }
    }
</style>
